<?php
use yii\helpers\Html;
use yii\helpers\Url;
use yii\bootstrap\ActiveForm;

$this->title = 'create';
?>
<link href="plugins/scs.min.css" rel="stylesheet" />
<link href="plugins/time.css" rel="stylesheet" />
<style>
  .add_staff .staffsex_box{overflow:hidden;}
  .add_staff .staffsex_box>span{float:left;margin-top:10px;font-weight:700;}
  .add_staff .staffsex_box .radio{float:left;margin-left:50px;}
  .add_staff .box-footer{text-align:center;}
  .add_staff .box-footer button{width:200px;}
  #datetitle{width:100%;height:50px;}
  #datetitle h1{line-height:50px;}
  .cascade_scroll_selects .scs_container .scs_dialog{position:fixed;width:50%;}
</style>
<section class="content-header">
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
    <li class="active">新建员工</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">
  <div class="row">
    <div class="col-xs-12">
      <div class="box-header"><h2 class="box-title"><?php if ($model->id) {?>修改员工<?php } else{ ?>新建员工<?php }?></h2></div>
      <div class="box-body add_staff">
        <?php $form = ActiveForm::begin(['action' => ['employees/create', 'id' => $model->id], 'method' => 'post']);?>
          <div class="box-body">
            <div class="form-group">
              <label for="staff_uname">姓名</label>
              <?=Html::textInput('realname', $model->realname, ['class' => 'form-control', "id" => "staff_uname"]);?>
            </div>
            <div class="form-group staffsex_box">
              <span>性别</span>
              <div class="radio">
                <label><?=Html::radioList('sex', $model->sex,['1'=>'男','2'=>'女'],['class'=>'form-control']);?></label>
              </div>
            </div>
            <div class="form-group">
              <label for="staff_num">工号</label>
              <?=Html::textInput('id_card', $model->id_card,['class' => 'form-control', "id" => "staff_num"]);?>
            </div>
            <div class="form-group">
              <label for="staff_phone">电话</label>
              <?=Html::textInput('mobile', $model->mobile,['class' => 'form-control', "id" => "staff_phone"]);?>
            </div>
            <div class="form-group address">
              <label for="staff_city">居住地址</label>
              <!-- <input type="text" data-key="4-84-1298"  name="addr"  id="myAddrs" readonly class="form-control" id="staff_city" placeholder="请选择居住地址"> -->
              <?=Html::textInput('address', $model->address,['class'=>'form-control', 'rows'=>'3', "id" => "myAddrs", 'readonly' => true, 'data-key' => '4-84-1298']);?>
            </div>
            <div class="form-group">
              <label>入职日期:</label>
              <div class="input-group date">
                <div class="input-group-addon">
                  <i class="fa fa-calendar"></i>
                </div>
                <?=Html::textInput('entry', date('Y-m-d', $model->entry), ['class' => 'form-control pull-right', 'id' => 'datepicker', 'readonly' => true]);?>
              </div>
              <!-- /.input group -->
            </div>
          </div>
          <div class="box-footer">
            <button type="submit" class="btn btn-primary">确定</button>
          </div>
        <?php ActiveForm::end();?>
      </div>
    </div>
  </div>
</section>
<div id="datePlugin"></div>

<script src="js/jquery.js"></script>
<script type="text/javascript" src="plugins/date.js" ></script>
<script type="text/javascript" src="plugins/iscroll.js" ></script>
<script src="plugins/jquery.scs.min.js"></script>
<script src="plugins/CNAddrArr.min.js"></script>
<script src="plugins/datepicker/bootstrap-datepicker.js"></script>

<script>
  $('#datepicker').datepicker({
    autoclose: true
  });
  /*地址选择*/
  $(function() {
    function getAddrsArrayById(id) {
      var results = [];
      if (addr_arr[id] != undefined)
        addr_arr[id].forEach(function(subArr) {
          results.push({
            key: subArr[0],
            val: subArr[1]
          });
        });
      else {
        return;
      }
      return results;
    }
    function getStartIndexByKeyFromStartArr(startArr, key) {
      var result = 0;
      if (startArr != undefined)
        startArr.forEach(function(obj, index) {
          if (obj.key == key) {
            result = index;
            return false;
          }
        });
      return result;
    }

    //bind the click event for 'input' element
    $("#myAddrs").click(function() {
      var val=$(this).val().replace(/ /g, "-");
      var PROVINCES = [],
          startCities = [],
          startDists = [];
      //Province data，shall never change.
      addr_arr[0].forEach(function(prov) {
        PROVINCES.push({
          key: prov[0],
          val: prov[1]
        });
      });
      //init other data.
      var $input = $(this),
          dataKey = $input.attr("data-key"),
          provKey = 1, //default province 北京
          cityKey = 36, //default city 北京
          distKey = 37, //default district 北京东城区
          distStartIndex = 0, //default 0
          cityStartIndex = 0, //default 0
          provStartIndex = 0; //default 0

      if (dataKey != "" && dataKey != undefined) {
        var sArr = dataKey.split("-");
        if (sArr.length == 3) {
          provKey = sArr[0];
          cityKey = sArr[1];
          distKey = sArr[2];

        } else if (sArr.length == 2) {
          provKey = sArr[0];
          cityKey = sArr[1];
        }
        startCities = getAddrsArrayById(provKey);
        startDists = getAddrsArrayById(cityKey);
        provStartIndex = getStartIndexByKeyFromStartArr(PROVINCES, provKey);
        cityStartIndex = getStartIndexByKeyFromStartArr(startCities, cityKey);
        distStartIndex = getStartIndexByKeyFromStartArr(startDists, distKey);
      }
      var navArr = [{
        title: "省",
        id: "scs_items_prov"
      }, {
        title: "市",
        id: "scs_items_city"
      }, {
        title: "区",
        id: "scs_items_dist"
      }];
      SCS.init({
        navArr: navArr,
        onOk: function(selectedKey, selectedValue) {
          $input.val(selectedValue).attr("data-key", selectedKey);
        }
      });
      var distScroller = new SCS.scrollCascadeSelect({
        el: "#" + navArr[2].id,
        dataArr: startDists,
        startIndex: distStartIndex
      });
      var cityScroller = new SCS.scrollCascadeSelect({
        el: "#" + navArr[1].id,
        dataArr: startCities,
        startIndex: cityStartIndex,
        onChange: function(selectedItem, selectedIndex) {
          distScroller.render(getAddrsArrayById(selectedItem.key), 0); //re-render distScroller when cityScroller change
        }
      });
      var provScroller = new SCS.scrollCascadeSelect({
        el: "#" + navArr[0].id,
        dataArr: PROVINCES,
        startIndex: provStartIndex,
        onChange: function(selectedItem, selectedIndex) { //re-render both cityScroller and distScroller when provScroller change
          cityScroller.render(getAddrsArrayById(selectedItem.key), 0);
          distScroller.render(getAddrsArrayById(cityScroller.getSelectedItem().key), 0);
        }
      });
    });
  });
</script>